<template>
	<view class="navbar" :style="navbarData.isTopFixed ? fixedStyle : style">
		<view class="navbar-header"
			:style="navbarData.isTopFixed ? '' : 'transition: transform; animation: fadeIn .6s linear 1;'"
			:class="navbarData.isTopFixed ? '' : 'u-bg-color-white'">
			<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="title-bar" :style="{ height: titleBarHeight + 'px' }">
				<view class="back-btn width-class">
					<view v-if="navbarData.showCapsule" class="left_icon">
						<!--  左上角的返回按钮，v-if='!share'空制返回按钮显示-->
						<!--  从分享进入小程序时 返回上一级按钮不应该存在-->
						<!-- <view @click="_navback" v-if="!share"><i class="iconfont icon-left"
                :style="{color:(navbarData.backColor?navbarData.backColor:'#444')}"></i></view> -->
						<view @click="_navback" v-if="!share" class="icon-left">
							<image :src="navbarData.whiteIcon ? leftIconWhite : leftIconBlock" mode="widthFix"
								style="width:100%"></image>
						</view>
						<view class="homeicon" v-if="!navbarData.hideHome">
							<view class="navbar-v-line" v-if="!share"></view>
							<view @click="_backhome" class="home-log home-000">
								<!-- <i class="iconfont iconfont icon-wap-home "></i> -->
								<image :src="homeIconBlock" mode="widthFix" style="width:100%"></image>
							</view>
						</view>
					</view>
					<view v-else>
						<block v-if="!navbarData.navbarDataShowHome">
							<!-- 显示搜索跟返回图标 -->
							<view class="left_icon">
								<block v-if="navbarData.showSearchAndBack">
									<!-- <view @click="_navback" v-if="!share"><i class="iconfont icon-left"
                      :style="{color:(navbarData.backColor?navbarData.backColor:'#444')}"></i></view> -->
									<view @click="_navback" v-if="!share" class="icon-left">
										<image :src="navbarData.whiteIcon ? leftIconWhite : leftIconBlock"
											mode="widthFix" style="width:100%"></image>
									</view>
									<view class="homeicon" v-if="!navbarData.hideSearch">
										<view class="navbar-v-line" v-if="!share"></view>
									</view>
								</block>
								<view :class="navbarData.showSearchAndBack ? 'searchIcon' : ''">
									<!-- ICH搜索相关start -->
									<navigator v-if="!navbarData.hideSearch && getBrandType != 2" class="search_content"
										url="/pages/search/search?type=search" hover-class="none">
										<image :src="navbarData.leftIcon" mode="widthFix"
											style="width:65rpx;height:65rpx"></image>
									</navigator>
									<!-- ICH搜索相关end -->
									<!-- PB搜索相关start -->
									<navigator v-if="getBrandType == 2" class="search_content"
										url="/pages/search/search?type=search" hover-class="none">
										<image :src="navbarData.leftIcon" mode="widthFix"
											style="width:65rpx;height:65rpx"></image>
									</navigator>
									<!-- PB搜索相关end -->
								</view>
							</view>
						</block>
						<block v-else>
							<!--  1v1页面home图标 -->
							<view class="home-log" @click="_backhome">
								<image :src="navbarData.navbarDataShowHomeColor===1?homeIconBlock:homeIconWhite"
									mode="widthFix" style="width:100%"></image>
							</view>
						</block>
					</view>
				</view>
				<block>
					<view class="logo1" v-if="navbarData.navbarTitle || navbarData.hideCenter">
						<text class="navbarTitle">{{ navbarData.navbarTitle }}</text>
					</view>
					<view @click="_backhome" class="logo" v-else>
						<image :src="navbarData.isTopFixed ? whiteImageLogo : getLogo" mode="widthFix"></image>
					</view>
				</block>
				<view class="width-class transparent"></view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		SYSTEM_INFO
	} from '@/utils/constant';
	export default {
		props: {
			navbarData: {
				//navbarData   由父页面传递的数据，变量名字自命名
				type: Object
			},
			tsActId: {
				type: String
			}
		},

		data() {
			return {
				logo: '',
				nowPages: '',
				previousPages: '',
				lastPages: '',
				share: '',
				statusBarHeight: 0,
				titleBarHeight: 0,
				whiteImageLogo: 'https://100000063-1252208446.file.myqcloud.com/images/brandlogo_white.png',
				leftIconBlock: "",
				homeIconBlock: "",
				leftIconWhite: "",
				homeIconWhite: "",
			};
		},
		// https://100000063-1252208446.file.myqcloud.com/images/MF-EB-P4/icon@2x (5).png
		onShow() {
			this.share = getApp().globalData.share;
		},
		computed: {
			getLogo() {
				return this.$store.state.storeLogo;
			},
			getBrandType() {
				return this.$store.state.brandType;
			},

			style() {
				var style = 'padding-top:'.concat(this.statusBarHeight + this.titleBarHeight, 'px;');
				return style;
			},
			fixedStyle() {
				var style = 'position:fixed; background: transparent; z-index:99999;';
			}
		},
		mounted() {
			const {
				navbarSvg_Left,
				navbarSvg_Home
			} = require('./loading.svg.js');
			this.leftIconBlock = navbarSvg_Left();
			this.homeIconBlock = navbarSvg_Home();
			this.leftIconWhite = navbarSvg_Left('#fff');
			this.homeIconWhite = navbarSvg_Home('#fff');

			let pages = getCurrentPages();
			//当前页面
			var currPage = pages[pages.length - 1];
			this.nowPages = currPage.route;
			//上一级页面
			let prevPage = pages[pages.length - 2];
			if (prevPage == undefined) {
				this.share = false;
			} else if (prevPage !== undefined) {
				this.lastPages = prevPage.route;
			}

			let systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			let rect = uni.getMenuButtonBoundingClientRect ? uni.getMenuButtonBoundingClientRect() : null; //胶囊按钮位置信息
			uni.getMenuButtonBoundingClientRect();
			let navBarHeight = (function() {
				//导航栏高度
				let gap = rect.top - systemInfo.statusBarHeight; //动态计算每台手机状态栏到胶囊按钮间距
				return 2 * gap + rect.height;
			})();
			this.titleBarHeight = navBarHeight;
		},

		methods: {
			getNavHeight() {
				return this.navbarData.isTopFixed ? this.fixedStyle : this.style
			},
			// 返回上一页面
			_navback() {
				let pages = getCurrentPages(); //上一级页面
				let prevPage = pages[pages.length - 2];
				if (prevPage == undefined) {
					uni.reLaunch({
						url: '/pages/home/home'
					});
					return
				}
				if (pages.length >= 2 && pages[pages.length - 1].route == "pages/order/list" && (pages[pages.length - 2]
						.route == "pages/order/submit" || pages[pages.length - 2].route == "pages/order/specialSubmit")) {
					uni.reLaunch({
						url: '/pages/cart/cart'
					});
				}
				if (this.nowPages == 'pages/order/paySuccess' || (this.lastPages == "pages/order/specialSubmit" && this
						.nowPages !== 'pages/utcms/utcms')) {
					uni.reLaunch({
						url: '/pages/cart/cart'
					});
				} else {
					uni.navigateBack();
				}
			},
			//返回到首页
			_backhome() {
				let pages = getCurrentPages(); //上一级页面
				uni.reLaunch({
					url: '/pages/home/home'
				});
			}
		}
	};
</script>

<style lang="less">
	.navbar-header {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 200000;
		box-sizing: border-box;
		font-family: FrankNew-Regular, NotoSansSC-Regular;
	}

	.status-bar {
		// background: #fff;
	}

	@-webkit-keyframes fadeIn {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes fadeIn {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.title-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title-bar .back-btn,
	.title-bar .tablet {
		// width: 116px;
		// margin-left: 12px;

		padding-left: 24rpx;
	}

	.width-class {
		width: 80rpx;
	}

	.transparent {
		opacity: 0;
	}

	.homeicon {
		display: flex;
	}

	.body {
		height: 100%;
		overflow: auto;
	}

	.scroll-content {
		text-align: center;
	}

	.scroll-content .item {
		height: 60rpx;
		line-height: 60rpx;
		border-bottom: 1rpx solid #eee;
	}

	.navbar-v-line {
		width: 1px;
		height: 26rpx;
		background-color: #C6C6C7;
		margin: 18rpx 16rpx 0 8rpx;
	}

	.navbarTitle {
		font-size: 36rpx;
		color: black;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}

	.logo {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 36%;
		font-size: 26rpx;
		text-align: center;
	}

	.logo image {
		// max-height: 50rpx;
	}

	.icon-left {
		flex-shrink: 0;
		width: 48rpx;
		height: 48rpx;
		margin-top: 6rpx;
		// font-size: 56rpx;
		// color: #444;
		// margin-left: -16rpx;
	}

	.icon-wap-home,
	.home-000 {
		font-size: 44rpx;
		margin-top: 6rpx;
		color: #444;
		display: inline-block;
	}

	.left_icon {
		display: flex;
	}

	.content {
		font-size: 30px;
	}

	.search_content {
		width: 65rpx;

		.icon-fangdajing {
			font-size: 40rpx;
		}
	}

	.searchIcon {
		margin-top: 4px;
		margin-left: 3px;
	}

	.home-log {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>